{% macro help_topics(topics, show_community_support=False) -%}
  {% for topic in topics %}
    {% if loop.first %}<ul class="card-grid">{% endif %}
    <li>
      {% set topic_url = url('products.documents', product_slug=product.slug, topic_slug=topic.slug) %}
      <a href="{{ topic_url }}" data-on-hover="{{ _('See all') }}" data-event-category="link click" data-event-action="topic" data-event-label="{{topic.title}}">
        <img src="{{ STATIC_URL }}sumo/img/blank.png" class="topic-icon" style="background-image: url('{{ topic.image_url }}')" alt="" />
        <span class="title">{{ pgettext('DB: products.Topic.title', topic.title) }}</span>
      </a>
    </li>
  {% if loop.last %}
  </ul>
  {% endif %}
  {% endfor %}

  <section class="support-callouts">
    {% set listed_product=product.slug|capitalize %}

    {% if show_community_support %}
      <div class="support-callout community-support pos-rel">
        <figure class="feature-icon-box">
          <img src="{{ STATIC_URL }}sumo/img/icon.get-community-support.png" class="topic-icon" alt="Ask the Community icon" />
        </figure>
        <div class="support-callout-details">
          <h3 class="support-callout-title"><span class="highlight">{{ _('Ask the Community') }}</span></h3>
          <p class="support-callout-desc">{{ _('Our support forums are a great place to ask a question, learn and discover new ways to use {}.'.format(listed_product)) }}</p>
          <a class="support-callout-button expand-this-link"
            href="{{ url('wiki.document', 'get-community-support') }}"
            data-event-category="link click"
            data-event-action="topic"
            data-event-label="Get community support">{{ _('Ask a Question') }}
          </a>
        </div>
      </div>
    {% endif %}

    {% if settings.OIDC_ENABLE and product.id in subscribed_products_ids %}
      <div class="support-callout community-support pos-rel">
        <figure class="feature-icon-box">
          {% include "includes/icons/icon-airplane.svg" %}
        </figure>
        <div class="support-callout-details">
          <h3 class="support-callout-title"><span class="highlight">{{ _('Contact Us') }}</span></h3>
          <p class="support-callout-desc">{{ _('Contact the Support Team for help.') }}</p>
          <a class="support-callout-button expand-this-link" href="{{ settings.FXA_SUPPORT_FORM }}" data-event-category="link click" data-event-action="topic" data-event-label="Contact Support">{{ _('Ask a Question') }}</a>
        </div>
      </div>
    {% endif %}
  </section>
{%- endmacro %}

{% macro topic_sidebar(topics, subtopics, product, selected_topic=None, selected_subtopic=None) -%}
  <ul class="sidebar-nav topics">
    {% for topic in topics %}
      {% set topic_url = url('products.documents', product_slug=product.slug, topic_slug=topic.slug) %}
      <li {% if selected_topic == topic %}class="selected {% if subtopics %}has-subtopics{% endif %} {% if selected_subtopic != None %}subtopic-selected{% endif %}"{% endif %}>
        <a href="{{ topic_url }}" data-event-category="link click" data-event-action="topic sidebar" data-event-label="{{topic.title}}">
          {{ pgettext('DB: products.Topic.title', topic.title) }}
        </a>
        {% if selected_topic == topic %}
          <ul class="subtopics">
            {% for subtopic in subtopics %}
              {% set subtopic_url = url('products.subtopics', product_slug=product.slug, topic_slug=topic.slug, subtopic_slug=subtopic.slug) %}
              <li {{ selected_subtopic|class_selected(subtopic) }}>
                <a href="{{ subtopic_url }}" data-event-category="link click" data-event-action="subtopic sidebar" data-event-label="{{subtopic.title}}">
                {{ pgettext('DB: products.Topic.title', subtopic.title) }}
                </a>
              </li>
            {% endfor %}
          </ul>
        {% endif %}
      </li>
    {% endfor %}
  </ul>
{%- endmacro %}
